<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  <style>
    .rate {
      display: flex;
      line-height: 30px;
      align-items: center;
      font-size: 14px;
    }

    .rate>span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url("./imgs/score.png") center center / 16px 16px;
    }

    .rate>span.on {
      background: url("./imgs/score-on.png") center center / 16px 16px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>
    <ml-rate :value="num" @input="num=$event">配送速度：</ml-rate>
    <ml-rate :value="num2" @input="num2=$event">服务态度：</ml-rate>
  </div>

  <script type="x-template" id="rate">
    <div class="rate">
      <slot name="default"></slot>
      <span @click="$emit('input',i)" v-for="i in 5" :class="{on:value>=i}"></span>
    </div>
  </script>

  <script>

    // 封装组件的三大核心：自定义属性+自定义事件+自定义插槽
    let rate = {
      template: "#rate",
      props: {
        value: { type: Number, default: 0 }
      }
    }

    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          num: 1,
          num2: 2
        }
      },
      components: {
        "ml-rate": rate
      }
    });
  </script>
</body>

</html>